<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>订单管理</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min
.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #EFEFEF;
        }

        .am-header-default {
            background-color: #ED6D00;
        }

        .am-tabs-bd .am-tab-panel {
            padding: 10px;
        }

        .list-img {
            float: left;
            width: 85px;
        }

        .list-info {
            float: left;
            width: 128px;

        }

        .list-info span {
            display: block;
            line-height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list-time {
            float: left;
            padding: 25px 0px;

        }

        .list-state {
            float: right;
            padding: 25px 3px;
            font-size: 14px;
            padding-bottom: 10px;
        }

        .list-state .button {
            border: 1px #ED6D00 solid;
            padding: 5px 10px;
            color: #ED6D00;
            border-radius: 5px;
        }

        .list-state span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list {
            padding: 10px 0 0px 10px;
            border-bottom: 2px solid #EFEFEF;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientShopHome/goManage" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            订单管理
        </a>
    </h1>
</header>


<div data-am-widget="tabs" class="am-tabs am-tabs-d2 am-margin-0">
    <ul class="am-tabs-nav am-cf">
        <li class="am-active"><a href="[data-tab-panel-0]" onclick="getOrderAll()">全部</a></li>
        <li class=""><a href="[data-tab-panel-1]" onclick="getOrderConfirm()">待确认</a></li>
        <li class=""><a href="[data-tab-panel-2]" onclick="getOrderDelivery()">待配送</a></li>
        <li class=""><a href="[data-tab-panel-3]" onclick="getOrderComment()">待评价</a></li>
        <li class=""><a href="[data-tab-panel-4]" onclick="getOrderReminder()">催单</a></li>
    </ul>

    <div class="am-tabs-bd " style="margin-top: 10px;border: none">
        <div data-tab-panel-0 class="am-tab-panel am-active whiteBg am-padding-0" id="order">
            <div class="am-g list" v-for="item in items">
                <a :href="'${pageContext.request.contextPath}/clientGoodsOrder/detail?id='+item.id">
                    <div class="am-u-sm-3" style="padding:5px 0;">
                        <img :src="item.sysUser.avatar" width="100%" alt="">
                    </div>
                    <div class="am-u-sm-5">
                        <span>{{item.sysUser.nickname}}</span><br>
                        <span style="font-size: 14px;overflow: hidden;">{{item.receiveAddress}}</span><br>
                        <span style="display: inline-block;">￥{{item.totalPrice}}</span>
                    </div>
                    <div class="am-u-sm-4" align="right">
                        <span style="display: inline-block">{{item.createTime}}</span>
                    </div>
                    <div class="list-state">
                        <span class="button" v-if="item.statu == 0||item.statu == 1">未付款</span>
                        <span class="button" v-if="item.statu == 2">确认接单</span>
                        <span class="button" v-if="item.statu == 4">确认取消订单</span>
                        <span class="button" v-if="item.statu == 7">确认催单</span>
                        <span class="button" v-if="item.statu == 6||item.statu == 8">确认派送</span>
                        <span v-if="item.statu == 10">用户未评价</span>
                        <span v-if="item.statu == 11">已完成评价</span>
                    </div>
                </a>
            </div>
        </div>
        <div data-tab-panel-1 class="am-tab-panel whiteBg am-padding-0" id="orderConfirm">
            <div class="am-g list" v-for="item in items">
                <a :href="'${pageContext.request.contextPath}/clientGoodsOrder/detail?id='+item.id">
                    <div class="am-u-sm-3" style="padding:5px 0;">
                        <img :src="item.sysUser.avatar" width="100%" alt="">
                    </div>
                    <div class="am-u-sm-5">
                        <span>{{item.sysUser.nickname}}</span><br>
                        <span style="font-size: 14px;overflow: hidden;">{{item.receiveAddress}}</span><br>
                        <span style="display: inline-block;">￥{{item.totalPrice}}</span>
                    </div>
                    <div class="am-u-sm-4" align="right">
                        <span style="display: inline-block">{{item.createTime}}</span>
                    </div>
                    <div class="list-state">
                        <span class="button" v-if="item.statu == 0||item.statu == 1">未付款</span>
                        <span class="button" v-if="item.statu == 2">确认接单</span>
                        <span class="button" v-if="item.statu == 4">确认取消订单</span>
                        <span class="button" v-if="item.statu == 7">确认催单</span>
                        <span class="button" v-if="item.statu == 6||item.statu == 8">确认派送</span>
                        <span v-if="item.statu == 10">用户未评价</span>
                        <span v-if="item.statu == 11">已完成评价</span>
                    </div>
                </a>
            </div>
        </div>
        <div data-tab-panel-2 class="am-tab-panel  whiteBg am-padding-0 " id="orderDelivery">
            <div class="am-g list" v-for="item in items">
                <a :href="'${pageContext.request.contextPath}/clientGoodsOrder/detail?id='+item.id">
                    <div class="am-u-sm-3" style="padding:5px 0;">
                        <img :src="item.sysUser.avatar" width="100%" alt="">
                    </div>
                    <div class="am-u-sm-5">
                        <span>{{item.sysUser.nickname}}</span><br>
                        <span style="font-size: 14px;overflow: hidden;">{{item.receiveAddress}}</span><br>
                        <span style="display: inline-block;">￥{{item.totalPrice}}</span>
                    </div>
                    <div class="am-u-sm-4" align="right">
                        <span style="display: inline-block">{{item.createTime}}</span>
                    </div>
                    <div class="list-state">
                        <span class="button" v-if="item.statu == 0||item.statu == 1">未付款</span>
                        <span class="button" v-if="item.statu == 2">确认接单</span>
                        <span class="button" v-if="item.statu == 4">确认取消订单</span>
                        <span class="button" v-if="item.statu == 7">确认催单</span>
                        <span class="button" v-if="item.statu == 6||item.statu == 8">确认派送</span>
                        <span v-if="item.statu == 10">用户未评价</span>
                        <span v-if="item.statu == 11">已完成评价</span>
                    </div>
                </a>
            </div>
        </div>
        <div data-tab-panel-3 class="am-tab-panel whiteBg am-padding-0" id="orderComment">
            <div class="am-g list" v-for="item in items">
                <a :href="'${pageContext.request.contextPath}/clientGoodsOrder/detail?id='+item.id">
                    <div class="am-u-sm-3" style="padding:5px 0;">
                        <img :src="item.sysUser.avatar" width="100%" alt="">
                    </div>
                    <div class="am-u-sm-5">
                        <span>{{item.sysUser.nickname}}</span><br>
                        <span style="font-size: 14px;overflow: hidden;">{{item.receiveAddress}}</span><br>
                        <span style="display: inline-block;">￥{{item.totalPrice}}</span>
                    </div>
                    <div class="am-u-sm-4" align="right">
                        <span style="display: inline-block">{{item.createTime}}</span>
                    </div>
                    <div class="list-state">
                        <span class="button" v-if="item.statu == 0||item.statu == 1">未付款</span>
                        <span class="button" v-if="item.statu == 2">确认接单</span>
                        <span class="button" v-if="item.statu == 4">确认取消订单</span>
                        <span class="button" v-if="item.statu == 7">确认催单</span>
                        <span class="button" v-if="item.statu == 6||item.statu == 8">确认派送</span>
                        <span v-if="item.statu == 10">用户未评价</span>
                        <span v-if="item.statu == 11">已完成评价</span>
                    </div>
                </a>
            </div>
        </div>
        <div data-tab-panel-4 class="am-tab-panel whiteBg am-padding-0" id="orderReminder">
            <div class="am-g list" v-for="item in items">
                <a style="color: black;"
                   :href="'${pageContext.request.contextPath}/clientGoodsOrder/detail?id='+item.id">
                    <div class="am-u-sm-3" style="padding:5px 0;">
                        <img :src="item.sysUser.avatar" width="100%" alt="">
                    </div>
                    <div class="am-u-sm-5">
                        <span>{{item.sysUser.nickname}}</span><br>
                        <span style="font-size: 14px;overflow: hidden;">{{item.receiveAddress}}</span><br>
                        <span style="display: inline-block;">￥{{item.totalPrice}}</span>
                    </div>
                    <div class="am-u-sm-4" align="right">
                        <span style="display: inline-block">{{item.createTime}}</span>
                    </div>
                    <div class="list-state">
                        <span class="button" v-if="item.statu == 0||item.statu == 1">未付款</span>
                        <span class="button" v-if="item.statu == 2">确认接单</span>
                        <span class="button" v-if="item.statu == 4">确认取消订单</span>
                        <span class="button" v-if="item.statu == 7">确认催单</span>
                        <span class="button" v-if="item.statu == 6||item.statu == 8">确认派送</span>
                        <span v-if="item.statu == 10">用户未评价</span>
                        <span v-if="item.statu == 11">已完成评价</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>


<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script>
    Vue.filter('reverse', function (value) {
        return value.split('$')[2];
    });
    var orderlist = new Vue({
        el: "#order",
        data: {
            items: []
        }
    });
    var orderConfirm = new Vue({
        el: "#orderConfirm",
        data: {
            items: []
        }
    });

    var orderDelivery = new Vue({
        el: "#orderDelivery",
        data: {
            items: []
        }
    });

    var orderComment = new Vue({
        el: "#orderComment",
        data: {
            items: []
        }
    });

    var orderReminder = new Vue({
        el: "#orderReminder",
        data: {
            items: []
        }
    });

    function getOrderAll() {
        var state = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
        getList(state, orderlist);
    }

    function getOrderConfirm() {
        var state = [2];
        getList(state, orderConfirm);
    }

    function getOrderDelivery() {
        var state = [6, 8];
        getList(state, orderDelivery);
    }

    function getOrderComment() {
        var state = [10];
        getList(state, orderComment);
    }

    function getOrderReminder() {
        var state = [7];
        getList(state, orderReminder);
    }

    function getList(status, obj) {
        $.ajax({
            type: "get",
            data: {
                'status': status
            },
            url: '${pageContext.request.contextPath}/clientGoodsOrder/findAll',
            traditional: true,//这里设置为true
            dataType: 'json',
            success: function (data) {

                if (data.success == true && data.code == 200) {
                    $.each(data.obj, function (i, n) {
                        n.receiveAddress = n.receiveAddress.split('$')[2];
                    });
                    obj.items = data.obj;


                }
            }

        });
    }
    $(function () {
        $('#doc-my-tabs').tabs();
        getOrderAll();
    });

    $(function () {
        if ($(document.body).width() > 350) {
            $('.list-state').css('paddingRight', '10px');
            $('.list-time').css('paddingLeft', '10px');
        }
    });
</script>
<script type="text/javascript">

</script>


</body>

</html>
